<template>
  <el-form ref="form" :model="form" label-width="120px">
    <el-form-item label="Short Name" label-width="">
      <div style="width: 200px">
 
        <el-input v-model="form.shortName"> {{itemLinear.value.short_name}}</el-input>
      </div>
    </el-form-item>
    <el-form-item label="Unit">
      <el-select v-model="form.unit" placeholder="选择Unit">
        <el-option label="kg" value="kg"></el-option>
        <el-option label="km" value="km"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="Display Format">
      <div style="width: 200px">
        <el-input v-model="form.displayFormat"></el-input>
      </div>
    </el-form-item>
    <el-form-item label="Long Name">
      <div style="width: 200px">
        <el-input v-model="form.longName"></el-input>
      </div>
    </el-form-item>
    <!-- <div>  {{money}}</div> -->

    <div class="xuanfu">
      <V1  @intToPhy="getIntToPhy"></V1>
    </div>
    <div class="xuanfu"><V2 @phyToInt="getPhyToInt"></V2></div>
  </el-form>
  <el-form ref="form" :model="form">
    
  
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
  <!-- <V1></V1> -->
</template>
<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { useStore } from '@/render/store/index'
import V1 from '../../views/compu-method/intertophys.vue'
import V2 from '../../views/compu-method/phystointer.vue'
import axios from 'axios'
export default defineComponent({
  components: {
    V1,
    V2
  },

  setup() {
    const money = ref(11999)

    const itemLinear =ref( {
        name: '123',
        shortName: '4123',
        unit: 'kg',
        displayFormat: '%s',
        longName: '1423123',
        physToInternalFactor: 0,
        physToInternalScaleFactor: 2,
        physToInternalDenominator: 1,
        physToInternalUpperLimit: 0.0,
        physToInternalLowerLimit: 0.0,
        intToPhysicsFactor: 0,
        intToPhysicsScaleFactor: 0,
        intToPhysicsDenominator: 0,
        intToPhysicsUpperLimit: 0.0,
        intToPhysicsLowerLimit: 0.0
      })
     
    
   
    
    const onSubmit2 = () => {
    //  console.log(itemLinear.longName + 'itemLinear.value')
      
      axios
        .post('http://localhost:8080/linear',  {
        name: '123',
        shortName: '4123',
        unit: 'kg',
        displayFormat: '%s',
        longName: '1423123',
        physToInternalFactor: itemLinear.value.physToInternalFactor,
        physToInternalScaleFactor: 2,
        physToInternalDenominator: 1,
        physToInternalUpperLimit: 0.0,
        physToInternalLowerLimit: 0.0,
        intToPhysicsFactor: 0,
        intToPhysicsScaleFactor: 0,
        intToPhysicsDenominator: 0,
        intToPhysicsUpperLimit: 0.0,
        intToPhysicsLowerLimit: 0.0}, {},
        
        )
        .then((res) => {
          // handle success
          
          console.log(res)
        })
        .catch((error) => {
          // handle error
          console.log(error)
        })
      console.log('submit!')
    }

    return { money, onSubmit2, itemLinear
    ,
      name: "泪眼问花花不语，乱红飞过秋千去"
 }
  },
  data() {
    return {
      form: {
        shortName: '2131',
        unit: 'km',
        displayFormat: '%s',
        longName: '123123',
        physToInternalFactor: 11,
        physToInternalScaleFactor: 10,
        physToInternalDenominator: 5,
        physToInternalUpperLimit: 3.0,
        physToInternalLowerLimit: 10.0,
        intToPhysicsFactor: 0,
        intToPhysicsScaleFactor: 0,
        intToPhysicsDenominator: 0,
        intToPhysicsUpperLimit: 0.0,
        intToPhysicsLowerLimit: 0.0,
      }
    }
  },
  methods: {
       getIntToPhy (x: any)  {
      console.log(x + "getIntToPhy")
       this.form.intToPhysicsFactor = x.intToPhysicsFactor
       this.form.intToPhysicsScaleFactor = x.intToPhysicsScaleFactor
       this.form.intToPhysicsDenominator = x.intToPhysicsDenominator
       this.form.intToPhysicsUpperLimit = x.intToPhysicsUpperLimit
       this.form.intToPhysicsLowerLimit = x.intToPhysicsLowerLimit
      
      // {data:false}
    },
    getPhyToInt (x: any)  {
      console.log(x + "getPhyToInt")
       this.form.physToInternalFactor = x.physToInternalFactor
       this.form.physToInternalScaleFactor = x.physToInternalScaleFactor
       this.form.physToInternalDenominator = x.physToInternalDenominator
       this.form.physToInternalUpperLimit = x.physToInternalUpperLimit
       this.form.physToInternalLowerLimit = x.physToInternalLowerLimit

      

      // {data:false}
    },
     onSubmit(){
     
      console.log(this.form)
      axios
        .post('http://localhost:8080/linear',   {
        shortName: this.form.shortName,
        unit: this.form.unit,
        displayFormat: this.form.displayFormat,
        longName: this.form.longName,
        physToInternalFactor: this.form.physToInternalFactor,
        physToInternalScaleFactor: this.form.physToInternalScaleFactor,
        physToInternalDenominator: this.form.physToInternalDenominator,
        physToInternalUpperLimit: this.form.physToInternalUpperLimit,
        physToInternalLowerLimit: this.form.physToInternalLowerLimit,
        intToPhysicsFactor: this.form.intToPhysicsFactor,
        intToPhysicsScaleFactor: this.form.intToPhysicsScaleFactor,
        intToPhysicsDenominator: this.form.intToPhysicsDenominator,
        intToPhysicsUpperLimit: this.form.intToPhysicsUpperLimit,
        intToPhysicsLowerLimit:this.form.intToPhysicsLowerLimit,
      }
        
        )
        .then((res) => {
          // handle success
          
          console.log(res)
        })
        .catch((error) => {
          // handle error
          console.log(error)
        })
      console.log('submit!')
    }
  }
})
</script>

<style scoped lang="less">
@import '../../assets/style/index';
.editor {
  height: 100%;
  width: 100%;
  .isEmpty {
    display: none;
  }
  & > :deep(.el-tabs__header) {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: @main-row-height;
    border-bottom: @border-style;
    background-color: @main-background-color;
    margin: 0;
    .el-tabs__nav-wrap.is-scrollable {
      padding: 0 30px;
    }
    .el-tabs__nav-wrap {
      .el-tabs__nav-next,
      .el-tabs__nav-prev {
        width: 30px;
        height: @main-row-height;
        line-height: @main-row-height;
        .el-icon {
          box-sizing: content-box;
          margin: 5px;
          padding: 4px;
        }
        .el-icon:hover {
          background-color: #ccc;
        }
      }
      .el-tabs__nav-scroll {
        .el-tabs__nav {
          border-radius: 0;
          border: 0;
          .el-tabs__item {
            height: @main-row-height;
            line-height: @main-row-height;
          }
          .el-tabs__item:hover {
            background-color: #ccc;
          }
          .el-tabs__item.is-active {
            background-color: @content-background-color;
            border-bottom: 3px #409eff solid;
          }
        }
      }
    }
  }
  & > :deep(.el-tabs__content) {
    max-height: calc(~'100% - @{main-row-height}');
    min-height: calc(~'100% - @{main-row-height}');
    overflow-y: auto;
    background-color: @content-background-color;
  }
}
.empty {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.divider {
  text-align: center;
}
</style>
